<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="张明 - 专业的UI/UX设计师 & 前端开发者作品集，展示设计和开发项目">
    <meta name="keywords" content="设计师,前端开发,UI/UX,作品集,网页设计,移动应用设计">
    <meta name="author" content="张明">
    <title>个人作品集 | 专业设计师 & 前端开发者</title>
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入Google Fonts字体 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="styles.css">
    
    <!-- 引入JavaScript -->
    <script src="scripts.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <nav id="navbar" class="navbar">
        <div class="container">
            <a href="#" class="logo">
                <span class="logo-text">Portfolio</span>
            </a>
            
            <!-- 桌面端导航菜单 -->
            <ul class="nav-links">
                <li><a href="#home" aria-label="首页">首页</a></li>
                <li><a href="#about" aria-label="关于我">关于我</a></li>
                <li><a href="#projects" aria-label="作品集">作品集</a></li>
                <li><a href="#skills" aria-label="技能">技能</a></li>
                <li><a href="#contact" aria-label="联系我">联系我</a></li>
            </ul>
            
            <!-- 模式切换按钮 -->
            <button id="themeToggle" class="theme-toggle" aria-label="切换深色/浅色模式">
                <i class="fas fa-moon"></i>
            </button>
            
            <!-- 移动端菜单按钮 -->
            <button class="menu-btn" id="menuBtn">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </nav>
    
    <!-- 移动端导航菜单 -->
    <div class="mobile-menu" id="mobileMenu">
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我</a></li>
            <li><a href="#projects">作品集</a></li>
            <li><a href="#skills">技能</a></li>
            <li><a href="#contact">联系我</a></li>
            <li>
                <button id="mobileThemeToggle" class="mobile-theme-toggle" aria-label="切换深色/浅色模式">
                    <i class="fas fa-moon"></i>
                </button>
            </li>
        </ul>
    </div>
    
    <!-- 英雄区域 -->
    <section id="home" class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>你好，我是<span class="highlight">张明</span></h1>
                <p class="subtitle">专业的UI/UX设计师 & 前端开发者</p>
                <p class="intro-text">我专注于创建美观、实用且用户友好的数字体验，将创意理念转化为令人惊叹的视觉效果和流畅的交互体验。</p>
                <div class="cta-buttons">
                    <a href="#projects" class="btn btn-primary">查看作品集</a>
                    <a href="#contact" class="btn btn-secondary">联系我</a>
                </div>
            </div>
            <div class="hero-image">
                <img src="images/profile - picture.jpeg" alt="张明的个人照片" loading="lazy" class="lazy-image">
            </div>
        </div>
    </section>
    
    <!-- 关于我 -->
    <section id="about" class="about">
        <div class="container">
            <div class="section-header">
                <h2>关于<span class="highlight">我</span></h2>
                <div class="section-divider"></div>
            </div>
            
            <div class="about-content">
                <div class="about-image">
                    <img src="images/about-me.jpg" alt="工作中的张明" loading="lazy" class="lazy-image">
                </div>
                <div class="about-text">
                    <h3>我是一名充满热情的设计师和开发者</h3>
                    <p>拥有超过5年的设计和开发经验，我致力于创造既美观又实用的数字产品。我擅长将复杂的问题转化为简单、优雅的解决方案，始终将用户体验放在首位。</p>
                    <p>我的设计理念是简约但不简单，注重细节，追求完美。在开发方面，我专注于编写高质量、可维护的代码，确保项目能够顺利交付并满足客户需求。</p>
                    <p>除了专业技能外，我还具备良好的沟通能力和团队协作精神，能够有效地与客户和团队成员合作，共同完成项目目标。</p>
                    
                    <div class="personal-info">
                        <div class="info-item">
                            <span class="info-label"><i class="fas fa-birthday-cake"></i> 出生日期:</span>
                            <span class="info-value">1990年10月15日</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label"><i class="fas fa-map-marker-alt"></i> 所在地:</span>
                            <span class="info-value">上海市</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label"><i class="fas fa-envelope"></i> 邮箱:</span>
                            <span class="info-value">contact@example.com</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label"><i class="fas fa-phone"></i> 电话:</span>
                            <span class="info-value">+86 138 0000 0000</span>
                        </div>
                    </div>
                    
                    <div class="social-links">
                        <a href="#" class="social-link"><i class="fab fa-weixin"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-weibo"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-github"></i></a>
                        <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 个人成就和证书 -->
    <section id="achievements" class="section">
        <div class="container">
            <div class="section-header">
                <h2>个人<span class="highlight">成就</span></h2>
                <div class="section-divider"></div>
                <p>我的专业成就和获得的证书</p>
            </div>
            
            <div class="achievements-content">
                <!-- 成就部分 -->
                <div class="achievements-list">
                    <h3>专业成就</h3>
                    
                    <div class="achievement-item">
                        <div class="achievement-icon"><i class="fas fa-trophy"></i></div>
                        <div class="achievement-text">
                            <h4>前端开发大赛一等奖</h4>
                            <p>在全国前端开发大赛中获得一等奖，作品展示了创新的用户界面和优秀的性能优化。</p>
                            <span class="achievement-date">2021年</span>
                        </div>
                    </div>
                    
                    <div class="achievement-item">
                        <div class="achievement-icon"><i class="fas fa-rocket"></i></div>
                        <div class="achievement-text">
                            <h4>优秀项目负责人</h4>
                            <p>带领团队成功完成多个高价值项目，获得公司年度优秀项目负责人称号。</p>
                            <span class="achievement-date">2022年</span>
                        </div>
                    </div>
                    
                    <div class="achievement-item">
                        <div class="achievement-icon"><i class="fas fa-users"></i></div>
                        <div class="achievement-text">
                            <h4>技术社区贡献奖</h4>
                            <p>在技术社区中积极分享知识，贡献开源项目，获得社区颁发的贡献奖。</p>
                            <span class="achievement-date">2023年</span>
                        </div>
                    </div>
                </div>
                
                <!-- 证书部分 -->
                <div class="certificates">
                    <h3>专业证书</h3>
                    
                    <div class="certificate-grid">
                        <div class="certificate-item">
                            <div class="certificate-image">
                                <img src="images/certificate1.jpg" alt="React高级开发认证" loading="lazy" class="lazy-image">
                                <div class="certificate-overlay">
                                    <a href="#" class="certificate-link" aria-label="查看证书详情">
                                        <i class="fas fa-search"></i>
                                    </a>
                                </div>
                            </div>
                            <h4>React高级开发认证</h4>
                            <p>完成React高级开发课程并通过认证考试，掌握React高级特性和性能优化技巧。</p>
                        </div>
                        
                        <div class="certificate-item">
                            <div class="certificate-image">
                                <img src="images/certificate2.jpg" alt="UI/UX设计认证" loading="lazy" class="lazy-image">
                                <div class="certificate-overlay">
                                    <a href="#" class="certificate-link" aria-label="查看证书详情">
                                        <i class="fas fa-search"></i>
                                    </a>
                                </div>
                            </div>
                            <h4>UI/UX设计认证</h4>
                            <p>完成用户界面和用户体验设计专业课程，掌握现代设计工具和方法。</p>
                        </div>
                        
                        <div class="certificate-item">
                            <div class="certificate-image">
                                <img src="images/certificate3.jpg" alt="Web性能优化认证" loading="lazy" class="lazy-image">
                                <div class="certificate-overlay">
                                    <a href="#" class="certificate-link" aria-label="查看证书详情">
                                        <i class="fas fa-search"></i>
                                    </a>
                                </div>
                            </div>
                            <h4>Web性能优化认证</h4>
                            <p>学习并掌握网站性能优化技术，提高网页加载速度和用户体验。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 作品集 -->
    <section id="projects" class="projects">
        <div class="container">
            <div class="section-header">
                <h2>我的<span class="highlight">作品集</span></h2>
                <div class="section-divider"></div>
                <p>以下是我近年来完成的一些代表性项目，涵盖UI/UX设计、网站开发和移动应用等多个领域。</p>
            </div>
            
            <!-- 项目过滤器 -->
            <div class="project-filters">
                <button class="filter-btn active" data-filter="all">全部</button>
                <button class="filter-btn" data-filter="web">网站</button>
                <button class="filter-btn" data-filter="app">应用</button>
                <button class="filter-btn" data-filter="design">设计</button>
            </div>
            
            <!-- 项目网格 -->
            <div class="project-grid">
                <!-- 项目1 -->
                <div class="project-card" data-category="web">
                    <div class="project-image">
                        <img src="images/project1.jpg" alt="电商网站设计" loading="lazy" class="lazy-image">
                        <div class="project-overlay">
                            <div class="project-info">
                                <h4>响应式电商网站</h4>
                                <p>一个完整的电商平台，包含产品展示、购物车和支付功能。</p>
                                <a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 项目2 -->
                <div class="project-card" data-category="app">
                    <div class="project-image">
                        <img src="images/project2.jpg" alt="健康追踪应用" loading="lazy" class="lazy-image">
                        <div class="project-overlay">
                            <div class="project-info">
                                <h4>健康追踪应用</h4>
                                <p>帮助用户记录和分析健康数据的移动应用。</p>
                                <a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 项目3 -->
                <div class="project-card" data-category="design">
                    <div class="project-image">
                        <img src="images/project3.jpg" alt="品牌设计" loading="lazy" class="lazy-image">
                        <div class="project-overlay">
                            <div class="project-info">
                                <h4>企业品牌设计</h4>
                                <p>为科技初创公司设计的品牌标识和视觉系统。</p>
                                <a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 项目4 -->
                <div class="project-card" data-category="web">
                    <div class="project-image">
                        <img src="images/project4.jpg" alt="旅游博客" loading="lazy" class="lazy-image">
                        <div class="project-overlay">
                            <div class="project-info">
                                <h4>旅游博客平台</h4>
                                <p>分享旅行经验和攻略的博客网站，支持用户评论和互动。</p>
                                <a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 项目5 -->
                <div class="project-card" data-category="app">
                    <div class="project-image">
                        <img src="images/project5.jpg" alt="任务管理应用" loading="lazy" class="lazy-image">
                        <div class="project-overlay">
                            <div class="project-info">
                                <h4>团队任务管理应用</h4>
                                <p>帮助团队高效协作和管理任务的移动应用。</p>
                                <a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 项目6 -->
                <div class="project-card" data-category="design">
                    <div class="project-image">
                        <img src="images/project6.jpg" alt="移动应用界面设计" loading="lazy" class="lazy-image">
                        <div class="project-overlay">
                            <div class="project-info">
                                <h4>金融应用UI设计</h4>
                                <p>为金融科技公司设计的移动应用界面原型。</p>
                                <a href="#" class="project-link"><i class="fas fa-external-link-alt"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 技能 -->
    <section id="skills" class="skills">
        <div class="container">
            <div class="section-header">
                <h2>我的<span class="highlight">技能</span></h2>
                <div class="section-divider"></div>
                <p>我具备全面的设计和开发技能，能够独立完成从概念设计到最终实现的全过程。</p>
            </div>
            
            <div class="skills-content">
                <!-- 技术技能 -->
                <div class="technical-skills">
                    <h3>技术技能</h3>
                    
                    <div class="skill-item">
                        <div class="skill-info">
                            <span class="skill-name">HTML/CSS</span>
                            <span class="skill-percentage">95%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 95%;"></div>
                        </div>
                    </div>
                    
                    <div class="skill-item">
                        <div class="skill-info">
                            <span class="skill-name">JavaScript</span>
                            <span class="skill-percentage">90%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 90%;"></div>
                        </div>
                    </div>
                    
                    <div class="skill-item">
                        <div class="skill-info">
                            <span class="skill-name">React/Vue</span>
                            <span class="skill-percentage">85%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 85%;"></div>
                        </div>
                    </div>
                    
                    <div class="skill-item">
                        <div class="skill-info">
                            <span class="skill-name">UI/UX设计</span>
                            <span class="skill-percentage">88%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 88%;"></div>
                        </div>
                    </div>
                    
                    <div class="skill-item">
                        <div class="skill-info">
                            <span class="skill-name">Photoshop/Illustrator</span>
                            <span class="skill-percentage">82%</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 82%;"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 专业能力 -->
                <div class="professional-skills">
                    <h3>专业能力</h3>
                    
                    <div class="skill-grid">
                        <div class="skill-category">
                            <i class="fas fa-paint-brush"></i>
                            <h4>设计能力</h4>
                            <ul>
                                <li>用户界面设计</li>
                                <li>用户体验设计</li>
                                <li>交互设计</li>
                                <li>品牌设计</li>
                            </ul>
                        </div>
                        
                        <div class="skill-category">
                            <i class="fas fa-code"></i>
                            <h4>开发能力</h4>
                            <ul>
                                <li>前端开发</li>
                                <li>响应式设计</li>
                                <li>Web性能优化</li>
                                <li>跨浏览器兼容</li>
                            </ul>
                        </div>
                        
                        <div class="skill-category">
                            <i class="fas fa-project-diagram"></i>
                            <h4>项目管理</h4>
                            <ul>
                                <li>需求分析</li>
                                <li>敏捷开发</li>
                                <li>团队协作</li>
                                <li>时间管理</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 专业经历时间线 -->
    <section id="experience" class="section">
        <div class="container">
            <div class="section-header">
                <h2>专业<span class="highlight">经历</span></h2>
                <div class="section-divider"></div>
                <p>我的职业发展历程</p>
            </div>
            
            <div class="timeline">
                <!-- 时间线项目 1 -->
                <div class="timeline-item">
                    <div class="timeline-content">
                        <div class="timeline-date">2022年 - 至今</div>
                        <h3>高级前端开发工程师</h3>
                        <p class="timeline-company">科技有限公司</p>
                        <p>负责公司核心产品的前端架构设计和开发，优化前端性能，提升用户体验。带领团队完成多个大型项目的开发和迭代。</p>
                    </div>
                </div>
                
                <!-- 时间线项目 2 -->
                <div class="timeline-item">
                    <div class="timeline-content">
                        <div class="timeline-date">2019年 - 2022年</div>
                        <h3>前端开发工程师</h3>
                        <p class="timeline-company">互联网科技公司</p>
                        <p>参与多个企业级应用的前端开发，负责页面组件的设计和实现，优化用户界面，解决浏览器兼容性问题。</p>
                    </div>
                </div>
                
                <!-- 时间线项目 3 -->
                <div class="timeline-item">
                    <div class="timeline-content">
                        <div class="timeline-date">2017年 - 2019年</div>
                        <h3>Web开发实习生</h3>
                        <p class="timeline-company">软件技术有限公司</p>
                        <p>参与网站和Web应用的开发和维护，学习前端开发技术和最佳实践，协助团队完成项目任务。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 联系表单 -->
    <section id="contact" class="contact">
        <div class="container">
            <div class="section-header">
                <h2>联系<span class="highlight">我</span></h2>
                <div class="section-divider"></div>
                <p>如果您对我的作品感兴趣，或者有任何问题，欢迎随时联系我。我会尽快回复您的消息。</p>
            </div>
            
            <div class="contact-content">
                <!-- 联系信息 -->
                <div class="contact-info">
                    <h3>联系方式</h3>
                    
                    <div class="contact-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <div class="contact-text">
                            <h4>地址</h4>
                            <p>上海市浦东新区张江高科技园区科苑路88号</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <i class="fas fa-envelope"></i>
                        <div class="contact-text">
                            <h4>邮箱</h4>
                            <p>contact@example.com</p>
                        </div>
                    </div>
                    
                    <div class="contact-item">
                        <i class="fas fa-phone"></i>
                        <div class="contact-text">
                            <h4>电话</h4>
                            <p>+86 138 0000 0000</p>
                        </div>
                    </div>
                    
                    <div class="contact-social">
                        <h4>关注我</h4>
                        <div class="social-links">
                            <a href="#" class="social-link"><i class="fab fa-weixin"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-weibo"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-github"></i></a>
                            <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
                        </div>
                    </div>
                    
                    <!-- 地图显示 -->
                    <div class="map-container">
                        <h4>办公地址</h4>
                        <div class="map" id="map">
                            <!-- 地图将通过JavaScript加载 -->
                            <div style="width:100%;height:100%;background:#f5f5f5;display:flex;align-items:center;justify-content:center;">
                                <div style="text-align:center;">
                                    <i class="fas fa-map-marker-alt" style="font-size:48px;color:var(--primary-color);margin-bottom:10px;"></i>
                                    <p>上海市浦东新区张江高科技园区科苑路88号</p>
                                    <button class="view-map-btn" onclick="window.open('https://maps.google.com/?q=上海市浦东新区张江高科技园区科苑路88号', '_blank')">
                                        <i class="fas fa-external-link-alt"></i> 在地图中查看
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 联系表单 -->
                <div class="contact-form">
                    <h3>发送消息</h3>
                    
                    <form id="contactForm" action="" method="POST">
                        <div class="form-group">
                            <input type="text" id="name" name="name" placeholder="您的姓名" required>
                        </div>
                        
                        <div class="form-group">
                            <input type="email" id="email" name="email" placeholder="您的邮箱" required>
                        </div>
                        
                        <div class="form-group">
                            <input type="text" id="subject" name="subject" placeholder="主题" required>
                        </div>
                        
                        <div class="form-group">
                            <textarea id="message" name="message" rows="5" placeholder="您的消息" required></textarea>
                        </div>
                        
                        <button type="submit" class="btn btn-primary" aria-label="发送消息">发送消息</button>
                    </form>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <a href="#" class="logo">
                        <span class="logo-text">Portfolio</span>
                    </a>
                    <p>专业的设计与开发服务，为您创造令人惊叹的数字体验。</p>
                </div>
                
                <div class="footer-links">
                    <h4>快速链接</h4>
                    <ul>
                        <li><a href="#home">首页</a></li>
                        <li><a href="#about">关于我</a></li>
                        <li><a href="#projects">作品集</a></li>
                        <li><a href="#skills">技能</a></li>
                        <li><a href="#contact">联系我</a></li>
                    </ul>
                </div>
                
                <div class="footer-contact">
                    <h4>联系信息</h4>
                    <ul>
                        <li><i class="fas fa-envelope"></i> contact@example.com</li>
                        <li><i class="fas fa-phone"></i> +86 138 0000 0000</li>
                        <li><i class="fas fa-map-marker-alt"></i> 上海市浦东新区</li>
                    </ul>
                </div>
            </div>
            
            <div class="footer-bottom">
                <div class="footer-social">
                    <a href="#" class="social-link"><i class="fab fa-weixin"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-weibo"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-github"></i></a>
                    <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
                </div>
                
                <p class="copyright">© 2023 张明. 保留所有权利。</p>
            </div>
        </div>
    </footer>
    
    <!-- 返回顶部按钮 -->
    <button id="backToTop" class="back-to-top">
        <i class="fas fa-arrow-up"></i>
    </button>
    
    <!-- 引入JavaScript -->
    <script type="module" src="main.js"></script>
</body>
</html>